import style from "../assets/css/search.module.css";

import { Grid } from "antd-mobile/2x";
import { useState, useEffect } from "react";
import { RightOutline, LeftOutline, FireFill } from "antd-mobile-icons";
import { useHistory } from "react-router-dom";

import axios from "axios";

const Search = (props) => {
  // 得到history对象
  const history = useHistory();

  const [hotHotSearch, sethotHotSearch] = useState([]);

  const [hotApp, setHotApp] = useState([]);
  const [apply, setapply] = useState([]);
  const [name, setName] = useState("");

  useEffect(() => {
    getapply();
  }, [name]);

  const getapply = async () => {
    const _apply = await axios.post(
      "http://8.136.85.238:3001/api/getAllapply",
      {
        name,
      }
    );
    // console.log(_apply.data.data);
    setapply(_apply.data.data.slice(0, 1));
  };

  // 获取hotsearch
  useEffect(async () => {
    const _HotSearch = await axios.post(
      "http://8.136.85.238:3001/api/getAllHotSearch"
    );
    // console.log(_HotSearch.data.data);
    sethotHotSearch(_HotSearch.data.data);
  }, []);

  // 获取hotApp
  useEffect(async () => {
    const _hotApp = await axios.post(
      "http://8.136.85.238:3001/api/getAllhotApp"
    );
    // console.log(_hotApp.data.data);
    setHotApp(_hotApp.data.data);
  }, []);

  return (
    <div className={style.main}>
      <div className={style.top}>
        <LeftOutline
          style={{ fontSize: "24px" }}
          onClick={() => {
            props.history.goBack(-1);
          }}
        />
        {/* 搜索框 */}
        {/* <Top /> */}
        <div>
          <input
            className={style.input}
            value={name}
            type="text"
            placeholder="酷狗音乐"
            onInput={(ev) => setName(ev.target.value)}
          />
        </div>
        <div className={style.ss}>搜索</div>
      </div>

      <div className={style.body}>
        <>
          {apply.map((item, index) => (
            <div key={index} className={style.applies}>
              <div className={style.apply}>
                <img src={item.cover}></img>
                <div className={style.applyNav}>
                  <div className={style.applyName}>{item.name}</div>
                  <div className={style.applyIntro}>{item.intro}</div>
                  <div className={style.count}>
                    {item.downloadCount}
                    <span className={style.memsize}>{item.memsize}</span>
                  </div>
                </div>
              </div>
              <div
                className={style.applyWay}
                onClick={() => {
                  history.push({ pathname: "Detail" });
                }}
              >
                免流下载
              </div>
            </div>
          ))}
        </>
        {/* 热门应用 */}
        <>
          <div
            style={{
              marginTop: "10px",
            }}
          >
            <div className={style.hotApply}>
              <div className={style.hotApplybt}>热门应用</div>
              <div
                style={{
                  "--font-size": "30px",
                }}
                onClick={() => {
                  history.push({ pathname: "SE" });
                }}
              >
                全部
                <RightOutline />
              </div>
            </div>
            <div className={style.hotApp}>
              {hotApp.map((item, index) => (
                <div key={index} className={style.App}>
                  <img src={item.cover}></img>
                  <div className={style.AppName}>{item.name}</div>
                  <div
                    className={style.way}
                    onClick={() => {
                      history.push({ pathname: "Detail" });
                    }}
                  >
                    {item.downWay}
                  </div>
                </div>
              ))}
            </div>
          </div>
        </>

        {/* 热搜词 */}
        <>
          <div
            style={{
              marginTop: "10px",
            }}
          >
            <div className={style.rsc}>
              <div className={style.rscbt}>热搜词</div>
            </div>

            <div className={style.it}>
              {hotHotSearch.map((item, index) => (
                <div key={index}>
                  {item.cover ? <FireFill color="red" /> : ""}

                  {item.name}
                </div>
              ))}
            </div>
          </div>
        </>
      </div>
    </div>
  );
};

export default Search;
